<template>
	<!-- 首页 -->
	<div class="main-container">
		<!-- 上面内容 -->
		<div class="main-top">
			<div class="goods_left">
				<div class="goods_section">
					<div class="icon_box icon-warapper">
						<!-- <img src="../images/goodsCount02.png" /> -->
						<span class-name="card-panel-icon" class="el-icon-user-solid" style="font-size: 48px;"></span>
					</div>
					<div class="goods_text">
						<span>商品数量</span>
						<countTo :startVal='countStartVal' :endVal='countEndVal' :duration='3000'></countTo>
					</div>
				</div>
				<div class="goods_section">
					<div class="icon_box icon-chat">
						<span class-name="card-panel-icon" class="el-icon-chat-dot-square"
							style="font-size: 48px;"></span>
					</div>
					<div class="goods_text">
						<span>商品数量</span>
						<countTo :startVal='orderStartVal' :endVal='orderEndVal' :duration='3000'></countTo>
					</div>
				</div>
			</div>
			<div class="order_right">
				<div id="orderEcharts" style="width:684px; height: 350px;"></div>
			</div>
		</div>
		<!-- 下面内容 -->
		<div class="main-bottom">
			<div id="menoyEcharts" style="width:520px; height: 350px;float: left;"></div>
			<div id="areaEcharts" style="width:220px; height: 350px;float: left;"></div>
			<div id="chancelEcharts" style="width:220px; height: 350px;float: left;"></div>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	// import echarts from "echarts";
	import countTo from 'vue-count-to';
	import {
		info
	} from "./api.js"
	export default {
		components: {
			countTo
		},
		data() {
			return {
				countStartVal: 0,
				countEndVal: 21,
				orderStartVal: 0,
				orderEndVal: 315
			}
		},
		methods: {},
		mounted() {
			info().then(res => {
				let echarts = require('echarts');
				let order = echarts.init(document.getElementById('orderEcharts'));
				let money = echarts.init(document.getElementById('menoyEcharts'));
				let area = echarts.init(document.getElementById('areaEcharts'));
				let chancel = echarts.init(document.getElementById('chancelEcharts'));
				// 7日订单
				var orderOption = {
					title: {
						text: '7日订单',
					},
					legend: {
						data: ["订单数"],
						right: 1
					},
					xAxis: {
						type: 'category',
						data: res.data.data.daysSum[0]
					},
					yAxis: {
						name: "订单数",
						type: "value",
						axisLine: {
							show: false
						},
						type: 'value'
					},
					series: [{
						name: "订单数",
						yAxisIndex: 0,
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'bar',
						color: "#00B5FF",
						barWidth: 30
					}]
				};
				orderOption && order.setOption(orderOption);
				// 成交金额
				var moneyOption = {
					title: {
						text: "7日成交金额"
					},
					legend: {
						data: ["订单数"],
						right: 1
					},
					yAxis: [{
						name: "订单数",
						type: "value",
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: "#666",
							fontSize: 12
						}
					}],
					xAxis: {
						axisTick: {
							show: false
						},
						axisLabel: {
							color: "#666",
							fontSize: 12,
							margin: 12
						},
						data: res.data.data.daysSum[0]
					},
					series: [{
						name: "订单数",
						yAxisIndex: 0,
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: "line",
						color: "#20B2AA"
					}]
				}
				moneyOption && money.setOption(moneyOption);
				var areaOption = {
					title: {
						text: "订单地区分布"
					},
					legend: {
						data: ["地区分布"],
						right: 1,
						color: "#d53a35"
					},
					series: [{
						type: "pie",
						name: "地区分布",
						data: res.data.data.area
					}]
				}
				areaOption && area.setOption(areaOption);
				var chancelOption = {
					title: {
						text: "订单渠道分布"
					},
					legend: {
						data: ["渠道分布"],
						right: 1,
						color: "#20B2AA"
					},
					series: [{
						type: "pie",
						name: "地区分布",
						data: res.data.data.channel,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: "rgba(0, 0, 0, 0.5)"
							}
						}
					}]
				}
				chancelOption && chancel.setOption(chancelOption);
			});

		},
		created() {},

	}
</script>

<style>
	.main-container {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 30px;
		background: #f0f2f5;
	}

	.main-top {
		width: 100%;
		/* background: #049EC4; */
		display: flex;
	}

	.goods_left {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
	}

	.goods_section {
		width: 215px;
		height: 108px;
		background-color: #fff;
		margin: 20px 0 0 20px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
		align-items: center;
		box-shadow: 4px 4px 40px rgb(0 0 0 / 5%);
		border-color: rgba(0, 0, 0, 0.05);
	}

	.goods_section:nth-child(2) {
		margin-top: 50px;
	}

	.icon_box {
		float: left;
		transition: all 0.38s ease-out;
		border-radius: 6px;
		padding: 16px;
		color: #40c9c6;
	}

	.icon-chat {
		float: left;
		transition: all 0.38s ease-out;
		border-radius: 6px;
		padding: 16px;
		color: #36a3f7;
	}

	.goods_section .icon-warapper {
		color: #40c9c6;
	}

	.goods_section :hover .icon-chat {
		color: #fff;
	}

	.goods_section:hover .icon-warapper {
		background: #40c9c6;
	}

	.goods_section:nth-child(2):hover .icon-chat {
		background: #36a3f7;
	}

	.goods_section:hover .icon_box {
		color: #fff;
	}

	.goods_text {
		display: flex;
		flex-direction: column;
	}

	.goods_text span {
		line-height: 18px;
		color: rgba(0, 0, 0, 0.45);
		font-size: 16px;
		margin-bottom: 12px;
		font-weight: 600;
	}

	.goods_text span:nth-child(2) {
		color: #666;
		font-size: 20px;
	}

	.order_right {
		display: flex;
		/* margin-left: 100px; */
		padding: 20px 0 0 100px;
	}
</style>
